
import { useEffect, useState } from "react";
import { autorun } from "mobx"
import { observer } from "mobx-react"
import React from "react";

function App(this: any, props: any) {

  let [a, setA] = useState(0)


  // useEffect(()=>{
  //   setTimeout(()=>{
  //     props.stores.Counter.setCount(3333)
  //     // setA(--a)
  //   },2000)
  // },[])
  autorun(() => {
    console.log('autorun', a);
  })
  useEffect(() => {
    console.log('useEffect', a);
  }, [a])


  return (
    <div className="App">
      count:{props.stores.Counter.count} <br />
      count:{props.stores.Counter.count2} <br />
      <button onClick={() => props.stores.Counter.setCount(props.stores.Counter.count + 1)}>count++</button> <br />
      a:{a} <br />
      <button onClick={() => setA(++a)}>a++</button>

    </div>
  );
}

export default observer(App);
